@keyframes
Точки анимации - Кейфреймы
Сначала разберёмся, как работает анимация в целом. К примеру, фильм — это набор неподвижных кадров.
animation
Подключение анимации ( короткая запись)
За применение анимации к HTML-элементу отвечает группа свойств animation .
animation-name
Имя для привязки к анимации
Чтобы связать ключевые кадры CSS-анимации с конкретным элементом, используется свойство animation-name .
animation-timing-function
Вид анимации
При помощи свойства animation-timing-function можно задать, как будет развиваться анимация между ключевыми кадрами
animation-delay
Задержка воспроизведения анимации
Свойство задаёт задержку воспроизведения CSS-анимации.
animation-direction
Воспроизведение в обратном порядке
Свойство animation-direction сообщает браузеру, должна ли анимация проигрываться в обратном порядке.
animation-duration
Длительность цикла анимации
При помощи свойства animation-duration прописывается длительность одного цикла анимации.
animation-fill-mode
Стили до и после проигрывания анимации
animation-fill-mode сообщает браузеру, нужно ли применять стили ключевых кадров до или после проигрывания анимации.
animation-iteration-count
Сколько раз проигрывать анимацию
При помощи свойства animation-iteration-count можно указать, сколько раз будет проигрываться CSS-анимация.
animation-play-state
Анимацию на паузу
Свойство, позволяющее ставить CSS-анимацию на паузу и запускать снова.